<!--
 * @author wangpeizhi
 -->
<template>
  <div class="war-manage">
    <div class="war-manage-title">新建/编辑对战</div>
    <section v-loading="loading" class="war-manage-main">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="`${labelWidth}px`"
        label-position="center"
        class="form"
      >
        <el-form-item label="对战类型" prop="pkType">
          <el-select v-model="form.pkType" placeholder="请选择对战类型">
            <el-option
              v-for="item in dict.PKLX"
              :key="item.id"
              :value="item.dictValue"
              :label="item.dictName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对战名称" prop="pkName">
          <el-input
            v-model.trim="form.pkName"
            placeholder="请输入对战名称"
            maxlength="50"
          />
        </el-form-item>

        <el-form-item label="对战开始时间" prop="activityStartTime">
          <el-date-picker
            v-model="form.activityStartTime"
            style="width: 100%"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="对战结束时间" prop="activityEndTime">
          <el-date-picker
            v-model="form.activityEndTime"
            style="width: 100%"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="对战排行背景" prop="backImg">
          <image-upload
            :key="uploadImg.imagecropperKey"
            v-model="form.backImg"
            :preview-id="uploadImg.viewId"
            :forever="true"
            :width="750"
            :view="uploadImg.view"
            :height="316"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="isOss"
            @changeOssPath="
              (path) => {
                uploadImg.viewId = path
              }
            "
          />
        </el-form-item>
        <el-form-item label="对战排行显示数量" prop="showNum">
          <el-input
            v-model.trim="form.showNum"
            placeholder="请输入对战排行显示数量"
            maxlength="5"
          />
        </el-form-item>
        <el-form-item label="关联题库" prop="fkClassifId">
          <el-button
            v-if="!form.fkClassifId"
            size="mini"
            type="primary"
            @click="dialogPowerVisible = true"
          >选择题库
          </el-button>
          <!--          :closable="state === 'create'"-->
          <el-tag
            v-else
            :closable="true"
            type="primary"
            @close="handleClose()"
          >
            {{ form.fkClassifName }}
          </el-tag>
        </el-form-item>
        <el-form-item label="题目难度类型" prop="randomType">
          <el-radio-group v-model="form.randomType">
            <el-radio
              v-for="item in dict.PKTMND"
              :key="item.id"
              :label="item.dictValue"
            >{{ item.dictName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="每题分值" prop="questionScore">
          <el-input-number
            v-model="form.questionScore"
            placeholder="请输入每题分值"
            :min="1"
            :step="1"
            step-strictly
          />
        </el-form-item>
        <el-form-item label="对战胜利分数" prop="winScore">
          <el-input-number
            v-model="form.winScore"
            placeholder="请输入对战胜利分数"
            :min="1"
            :step="1"
            step-strictly
          />
        </el-form-item>
        <p class="tips" :style="`margin-left:${labelWidth}px;`">
          最先达到对战胜利分数的人即为获胜
        </p>
        <el-form-item label="每日对战次数" required>
          <div class="row">
            <el-form-item label="" :prop="isUnlimited ? '' : 'limitDayTimes'">
              <el-input-number
                v-model="form.limitDayTimes"
                placeholder="请输入每日对战次数"
                :disabled="isUnlimited"
                :min="1"
                :step="1"
                step-strictly
              />
            </el-form-item>
            <el-form-item label="">
              <el-checkbox
                v-model="isUnlimited"
                @change="handleChangeUnlimited"
              >无上限
              </el-checkbox>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="对战限时（秒）" prop="limitTime">
          <el-input-number
            v-model="form.limitTime"
            placeholder="请输入对战限时（秒）"
            :min="1"
            :step="1"
            step-strictly
          />
        </el-form-item>
        <el-form-item label="匹配失败时长（秒）" prop="limitMatchTime">
          <el-input-number
            v-model="form.limitMatchTime"
            placeholder="请输入匹配失败时长（秒）"
            :min="1"
            :step="1"
            step-strictly
          />
        </el-form-item>
        <p class="tips" :style="`margin-left:${labelWidth}px;`">
          代表在未开启机器人的情况下，用户在指定时长内仍未匹配到对手，则匹配失败
        </p>
        <el-form-item label="规则说明" prop="explain">
          <tinymce
            v-if="showtinymce"
            v-model="form.explain"
            :is-oss="uploadFile.isOss"
            :height="300"
          />
        </el-form-item>
        <el-form-item label="机器人状态" prop="robotStatus">
          <el-radio-group v-model="form.robotStatus">
            <el-radio
              v-for="item in dict.JQRZT"
              :key="item.id"
              :label="item.dictValue"
            >{{ item.dictName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.robotStatus.includes('OPEN')">
          <el-form-item label="机器人介入时间（秒）" prop="robotJoinTime">
            <el-input-number
              v-model="form.robotJoinTime"
              placeholder="请输入机器人介入时间（秒）"
              :min="1"
              :step="1"
              step-strictly
            />
          </el-form-item>
          <p class="tips" :style="`margin-left:${labelWidth}px;`">
            到达指定时长后仍未匹配到对手，则介入机器人进行对战
          </p>
          <el-form-item
            v-for="item in dict.PKROBOT"
            :key="item.id"
            :label="`（${item.dictName} ）机器人占比`"
            :prop="`robotRatio.${item.dictValue}`"
          >
            <el-input-number
              v-model="form.robotRatio[item.dictValue]"
              :placeholder="`请输入（${item.dictName} ）机器人占比`"
              :min="0"
              :max="100"
              :step="1"
              step-strictly
            />
          </el-form-item>
          <p class="tips red" :style="`margin-left:${labelWidth}px;`">
            注：机器人占比代表匹配对手为机器人时，遇到不同等级机器人的概率。所输机器人占比相加需为100%<br>

            例：（容易）机器人占比输入90%，则代表如用户匹配的对手是机器人，则90%会匹配到容易机器人
          </p></template>
        <el-form-item label="是否需要报名">
          <el-radio v-model="form.isApply" :label="0">不需要</el-radio>
          <el-radio v-model="form.isApply" :label="1">需要</el-radio>
        </el-form-item>
        <el-form-item v-if="form.isApply === 1" label="报名开始时间" prop="applyStartTime">
          <el-date-picker
            v-model="form.applyStartTime"
            style="width: 100%"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item v-if="form.isApply === 1" label="报名结束时间" prop="applyEndTime">
          <el-date-picker
            v-model="form.applyEndTime"
            style="width: 100%"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item v-if="form.isApply === 1" label="是否自定义报名信息">
          <el-radio v-model="form.isCustom" :label="0">不需要</el-radio>
          <el-radio v-model="form.isCustom" :label="1">需要</el-radio>
        </el-form-item>
        <el-form-item v-if="form.isCustom === 1 && form.isApply === 1" label="自定义报名信息">
          <div class="table-btn-container">
            <el-button @click="insertTable1">新增</el-button>
            <!--            <span class="tip">（姓名为固有选项，无需添加） </span>-->
          </div>
          <div class="table-container">
            <el-table :data="form.tableData1" stripe style="width: 100%">
              <el-table-column prop="date" label="名称" width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" placeholder="请输入名称" />
                </template>
              </el-table-column>
              <!--              <el-table-column prop="date" label="标识" width="180">-->
              <!--                <template slot-scope="scope">-->
              <!--                  <el-input v-model="scope.row.code" placeholder="请输入标识"/>-->
              <!--                </template>-->
              <!--              </el-table-column>-->
              <el-table-column prop="name" label="是否必填" width="180">
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.required" label="1">必填</el-radio>
                  <el-radio v-model="scope.row.required" label="2">非必填</el-radio>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="输入类型">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.srlx" placeholder="请选择">
                    <el-option
                      v-for="item in dicts.srlx"
                      :key="item.dictValue"
                      :label="item.dictName"
                      :value="item.dictValue"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="排序">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.address" placeholder="请输入排序" />
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteTable1(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <!-- 身份证 手机号 所在省份特殊处理 -->
        <el-form-item v-if="form.isApply === 1" label="是否填写姓名">
          <el-radio-group v-model="form.isFillName">
            <el-radio :label="0">不需要</el-radio>
            <el-radio :label="1">需要(必填)</el-radio>
            <el-radio :label="2">需要(选填)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isApply === 1" label="是否填写手机号">
          <el-radio v-model="form.isFillPhone" :label="0">不需要</el-radio>
          <el-radio v-model="form.isFillPhone" :label="1">需要(必填)</el-radio>
          <el-radio v-model="form.isFillPhone" :label="2">需要(选填)</el-radio>
        </el-form-item>
        <el-form-item v-if="form.isApply === 1" label="是否填写身份证">
          <el-radio v-model="form.isFillIdCard" :label="0">不需要</el-radio>
          <el-radio v-model="form.isFillIdCard" :label="1">需要(必填)</el-radio>
          <el-radio v-model="form.isFillIdCard" :label="2">需要(选填)</el-radio>
        </el-form-item>
        <el-form-item v-if="form.isApply === 1" label="是否填写所在地区">
          <el-radio v-model="form.isFillArea" :label="0">不需要</el-radio>
          <el-radio v-model="form.isFillArea" :label="1">需要(必填)</el-radio>
          <el-radio v-model="form.isFillArea" :label="2">需要(选填)</el-radio>
        </el-form-item>
      </el-form>
    </section>

    <section class="war-manage-footer">
      <el-button
        style="padding: 10px 30px;"
        @click="handleCancel"
      >取 消
      </el-button>
      <el-button type="primary" @click="handleComit('form')">确 定</el-button>
    </section>
    <!--选择题库  -->
    <el-dialog
      v-el-drag-dialog
      custom-class="my-dialog"
      title="选择题库"
      :visible.sync="dialogPowerVisible"
      center
      width="450px"
      :close-on-click-modal="false"
    >
      <choose-qs
        v-if="dialogPowerVisible"
        ref="PowerTreeFun"
        @subQs="getQsFun"
        @dialogPower="dialogPower"
      />
      <div slot="footer" class="dialog-footer">
        <el-button
          style="padding: 8px 30px;"
          @click="dialogPowerVisible = false"
        >取消
        </el-button>
        <el-button
          style="padding: 8px 30px;"
          type="primary"
          @click="powerTreeFun"
        >确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {specialText} from '@/utils/validate'
import {getDictByCode, pkInfoInsert, pkInfoUpdate, pkInfoGet} from '../api'
import ChooseQs from '@/views/skill/answerRush/components/chooseQs'
import elDragDialog from '@/directive/el-drag-dialog'
import Tinymce from '@/components/Tinymce'
import {v4 as uuidv4} from 'uuid'

export default {
  name: 'WarManage',
  components: {ChooseQs, Tinymce},
  directives: {elDragDialog},
  data() {
    return {
      uploadFile: {
        view: '/API-DOCUMENT/document/file/download?id=',
        isOss: !!sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG')
      },
      labelWidth: 240,
      loading: false,
      form: {
        id: '',
        pkType: '',
        pkName: '',
        activityStartTime: '', // 对战开始时间
        activityEndTime: '', // 对战结束时间
        randomType: '',
        questionScore: '',
        winScore: '',
        limitDayTimes: '',
        limitTime: '',
        limitMatchTime: '',
        robotStatus: '',
        robotJoinTime: '',
        robotRatio: {},
        fkClassifId: '',
        fkClassifName: '',
        explain: '',
        backImg: '',
        showNum: '',
        applyEndTime: '',
        applyStartTime: '',
        isApply: 0, // 是否需要报名
        isCustom: 0,
        tableData1: [],
        isFillPhone: 0,
        isFillIdCard: 0,
        isFillArea: 0,
        isFillName: 0
      },
      rules: {
        pkType: [
          {required: true, message: '请选择对战类型', trigger: 'change'}
        ],
        fkClassifId: [
          {
            required: true,
            message: '请选择关联题库',
            trigger: ['blur', 'change']
          }
        ],
        pkName: [
          {required: true, message: '请输入对战名称', trigger: 'blur'},
          {validator: specialText, trigger: 'blur'}
        ],
        activityEndTime: [
          {required: true, message: '请选择对战结束时间', trigger: 'change'}
        ],
        applyStartTime: [
          {required: true, message: '请选择报名开始时间', trigger: 'change'}
        ],
        applyEndTime: [
          {required: true, message: '请选择报名结束时间', trigger: 'change'}
        ],
        activityStartTime: [
          {required: true, message: '请选择对战开始时间', trigger: 'change'}
        ],
        randomType: [
          {required: true, message: '请选择题目难度类型', trigger: 'change'}
        ],
        questionScore: [
          {required: true, message: '请输入每题分值', trigger: 'blur'}
        ],
        winScore: [
          {required: true, message: '请输入对战胜利分数', trigger: 'blur'}
        ],
        limitDayTimes: [
          {required: true, message: '请输入每日对战次数', trigger: 'blur'}
        ],
        limitTime: [
          {required: true, message: '请输入对战限时（秒）', trigger: 'blur'}
        ],
        explain: [
          {required: true, message: '请输入规则说明', trigger: 'blur'}
        ],
        limitMatchTime: [
          {
            required: true,
            message: '请输入匹配失败时长（秒）',
            trigger: 'blur'
          }
        ],
        robotStatus: [
          {required: true, message: '请选择机器人状态', trigger: 'change'}
        ],
        robotJoinTime: [
          {
            required: true,
            message: '请输入机器人介入时间（秒）',
            trigger: 'blur'
          }
        ]
      },
      isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false,
      uploadImg: {
        viewId: '',
        view: '',
        imagecropperKey: 0
      },
      isUnlimited: false, // 是否无上限
      state: 'create',
      t: '0',
      dict: {
        PKLX: [], // 对战类型
        PKTMND: [], // 题目难度类型
        JQRZT: [], // 机器人状态
        PKROBOT: [] // 对战问卷机器人

      },
      dicts: {
        srlx: [
          {
            dictName: '文本',
            dictValue: 'text'
          },
          {
            dictName: '文本域',
            dictValue: 'textarea'
          },
          {
            dictName: '图片',
            dictValue: 'img'
          }
        ]
      },
      dialogPowerVisible: false,
      dictPromiseList: [],
      showtinymce: false
    }
  },
  created() {
    this.state = this.$route.query.type === 'c' ? 'create' : 'update'
    for (const key in this.dict) {
      this.dictPromiseList.push(this.getDict(key))
    }
    Promise.all([...this.dictPromiseList])
      .then((result) => {
        this.init()
        if (this.state === 'create') {
          this.showtinymce = true
        }
      })
      .catch(() => {
        this.$message({
          showClose: true,
          message: '数据加载失败，请稍后再试！',
          type: 'warning',
          onClose: () => {
            this.$router.back()
          }
        })
      })
  },
  methods: {
    insertTable1() {
      this.form.tableData1.push({
        code: uuidv4()
      })
    },
    deleteTable1(row) {
      this.form.tableData1.splice(row, 1)
    },
    init() {
      if (this.$route.query.type === 'u') {
        if (this.$route.query.i) {
          this.getData(this.$route.query.i)
        } else {
          this.$message({
            showClose: true,
            message: '参数异常！',
            type: 'warning',
            onClose: () => {
              this.$router.back()
            }
          })
        }
      }
    },
    /**
     * 获取字典
     */
    getDict(code) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then((res) => {
            this.dict[code] =
                  res.data.data && res.data.data.length > 0
                    ? res.data.data[0].list
                    : []
            if (code === 'PKROBOT') {
              this.dict[code].forEach((item) => {
                this.$set(this.form.robotRatio, item.dictValue, '')
                this.rules[`robotRatio.${item.dictValue}`] = [
                  {
                    required: true,
                    message: `请输入（${item.dictName} ）机器人占比`,
                    trigger: 'blur'
                  }
                ]
              })
            }
            resolve()
            loading.close()
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },

    /**
     * 根编辑回显
     */
    getData(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        pkInfoGet({id})
          .then((res) => {
            loading.close()
            const data = res.data.data
            for (const key in data) {
              if (key !== 'robotRatio') {
                this.form[key] !== undefined && (this.form[key] = data[key])
              }
            }
            // .includes('OPEN')
            if (data.robotRatio) {
              try {
                this.form.robotRatio = JSON.parse(data.robotRatio)
              } catch (error) {
                // this.form.robotRatio = ''
              }
            }
            if (data.limitDayTimes === -1) {
              this.form.limitDayTimes = ''
              this.isUnlimited = true
            }

            const infoData = JSON.parse(res.data.data.registInfo).slice(0, 4)
            this.$set(this.form, 'isFillName', infoData[0].status && infoData[0].required ? 1 : infoData[0].status ? 2 : 0)
            this.$set(this.form, 'isFillPhone', infoData[1].status && infoData[1].required ? 1 : infoData[1].status ? 2 : 0)
            this.$set(this.form, 'isFillIdCard', infoData[2].status && infoData[2].required ? 1 : infoData[2].status ? 2 : 0)
            this.$set(this.form, 'isFillArea', infoData[3].status && infoData[3].required ? 1 : infoData[3].status ? 2 : 0)
            this.$set(this.form, 'tableData1', JSON.parse(res.data.data.registInfo).slice(4) || [])
            this.uploadImg.viewId = data.backImgURL || ''
            this.showtinymce = true
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },
    handleChangeUnlimited(val) {
      this.$refs.form.clearValidate('limitDayTimes')
    },
    /**
     * 去掉某个题库
     * */
    handleClose() {
      this.form.fkClassifId = ''
      this.form.fkClassifName = ''
    },
    /**
     * 题库
     */
    getQsFun(obj) {
      this.form.fkClassifName = obj.menuName
      this.form.fkClassifId = obj.menuIds
      this.$refs.form.validateField('fkClassifId')
    },
    /**
     * 关闭权限弹框
     */
    dialogPower(val) {
      this.dialogPowerVisible = val
    },
    /**
     * 确认题库
     */
    powerTreeFun() {
      this.$refs.PowerTreeFun.saveData()
      this.dialogPowerVisible = false
    },
    /**
     * 取消
     */
    handleCancel() {
      this.$router.push({
        path: this.$filterPath('warList')
      })
    },
    handleComit() {
      const URI = this.state === 'create' ? pkInfoInsert : pkInfoUpdate
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.form)

          if (params.robotStatus.includes('OPEN')) {
            let sum = 0
            for (const key in params.robotRatio) {
              sum += Number(params.robotRatio[key])
            }
            if (sum !== 100) {
              this.$message({
                title: '成功',
                message: '机器人占比相加需为100%',
                type: 'warning',
                duration: 2000
              })
              return false
            } else {
              params.robotRatio = JSON.stringify(params.robotRatio)
            }
          } else {
            params.robotRatio = ''
          }
          if (params.isCustom !== 1) {
            params['tableData1'] = []
          }
          params['tableData1'].unshift({
            name: '所在地区',
            code: 'location',
            status: params.isFillArea !== 0,
            required: params.isFillArea === 1
          })
          params['tableData1'].unshift({
            name: '证件号',
            code: 'idCard',
            status: params.isFillIdCard !== 0,
            required: params.isFillIdCard === 1
          })
          params['tableData1'].unshift({
            name: '手机号',
            code: 'phoneNum',
            status: params.isFillPhone !== 0,
            required: params.isFillPhone === 1
          })
          params['tableData1'].unshift({
            name: '用户姓名',
            code: 'userName',
            status: params.isFillName !== 0,
            required: params.isFillName === 1
          })
          params['registInfo'] = params['tableData1'] ? JSON.stringify(params['tableData1']) : '[]'
          params.limitDayTimes = this.isUnlimited ? -1 : params.limitDayTimes

          delete params.tableData1
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            URI(params)
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: `${this.state === 'create' ? '创建' : '编辑'}成功`,
                  type: 'success',
                  duration: 2000
                })
                this.$router.push({
                  path: this.$filterPath('warList')
                })
              })
              .catch((error) => {
                params['registInfo'] = ''
                reject(error)
                loading.close()
              })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import '@/styles/mixin.scss';

.war-manage {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  padding-bottom: 100px;

  .war-manage-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;

    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .war-manage-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    padding-bottom: 80px;
    overflow: hidden;

    &::-webkit-scrollbar {
      width: 8px;
      /*对垂直流动条有效*/
      height: 1px;
      /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    &:hover {
      overflow: auto;
    }

    .form {
      width: 1000px !important;
      margin: 0 auto;

      .el-select {
        width: 100%;
      }

      .el-input-number {
        width: 100%;
      }

      .line {
        text-align: center;
      }

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-form-item {
          &:first-child {
            flex: 1;
          }

          &:last-child {
            width: 100px;
            margin-left: 10px;
          }
        }
      }

      .tips {
        color: #918d8d;

        &.red {
          color: $mainColor;
        }
      }
    }

    .select-data {
      display: inline-block;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding: 0 10px;
      margin-right: 5px;
      margin-bottom: 8px;

      i {
        cursor: pointer;
        padding-left: 5px;
      }
    }

    .selectbtn {
      display: inline-block;
      width: 120px;
      background: rgba(255, 255, 255, 1);
      @include border-color(1px, dotted, $mainColor);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      @include font-color($mainColor);
      text-align: center;
      cursor: pointer;
    }
  }

  .war-manage-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
